<script setup lang='ts'>
import { reactive, ref, onMounted } from 'vue'

defineProps({
  title: {
    type: String,
    default: ''
  },
  tip: {
    type: String,
    default: ''
  },
  header: {
    type: Boolean,
    default: false
  }
});

defineEmits([
  'access'
]);

</script>

<template>
  <view
    class="mt-middle-2 pb-middle-2 min-h-200 w-full flex flex-col justify-between items-center border-solid rounded-md border border-gray-200"
    style="flex: 1fr 1fr 1fr 1fr;">
    <view class="w-full p-mini-2 h-80 flex flex-row justify-between" v-if="header">
      <view class="title text-lg font-bold">{{ title }}</view>
      <view class="tip text-sm text-gray-400 cursor-pointer flex items-center " @click="$emit('access')">
        <span>{{ tip }}</span>
      </view>
    </view>
    <slot></slot>
  </view>
</template>
